<template>
	<view class="container">
		<view class="top_box">
			<navigator url="/pages/home/search/search" class="flex-box  flex-grow-1 mr30 inputbox">
				<image src="/static/icon/h-icon_sou.png" class="icon_search"></image>
				<input disabled class="fs22 flex-grow-1" @confirm="doSearch" :value="keyword" placeholder="请输入你要查找的内容"></input>
				<image src="/static/icon/close.png" class="icon_direct" style="width:40rpx;height:40rpx;"></image>
			</navigator>
			<view class="navbox flex-box flex-center">
				<view :class="'navitem ' + (house_state == 1 ? 'active' : '')" data-navindex="1" @tap="choosenav">
					待看房</view>
				<view :class="'navitem ' + (house_state == 2 ? 'active' : '')" data-navindex="2" @tap="choosenav">
					已看房</view>
				<view :class="'navitem ' + (house_state == 3 ? 'active' : '')" data-navindex="3" @tap="choosenav">
					已付订</view>
				<view :class="'navitem ' + (house_state == 4 ? 'active' : '')" data-navindex="4" @tap="choosenav">
					已签约</view>
				<view :class="'navitem ' + (house_state == 5 ? 'active' : '')" data-navindex="5" @tap="choosenav">
					已款清</view>
			</view>
		</view>
		<view class="list_box">
			<view class="list_item mb30" v-for="(item, index) in nowList.data"  @click="jumpDetail(item.id)">
				<view class="flex-box p30">
					<image :src="item.user.avatar" mode="aspectFill" class="avatar"></image>
					<view class="flex-grow-1">
						<view class="flex-box pb20 m-ellipsis">
							<view class="fs34 col10 fwb pr20">{{ item.user.nickname }}</view>
							<view class="fs24 col89">{{ item.city }} <text v-if="item.region">| {{ item.region }}</text><text v-if="item.orther_areas">| {{ item.orther_areas }}</text></view>
						</view>
						<view class="fs28 col89"><text class="pr30">{{item.total_price_text}}</text><text>{{item.house_search_roomnum_ids_text}}</text></view>
					</view>
					<view class="fs28 col89">{{item.updatetime_text}}</view>
				</view>
				<view v-if="item.item.new_follow_text" class="col10 plr30 pb20"><text class="col89">最近跟进：</text>{{item.new_follow_text}}</view>
				<view v-if="item.type_text" class="col10 plr30 pb20"><text class="col89">委托来源：</text>{{item.type_text}}</view>
				<view v-if="item.distributetime_text" class="col10 plr30 pb20"><text class="col89">首次录客：</text>{{item.distributetime_text}}</view>
				<view class="btn_box mt10 flex-box">
					<button @tap.stop.tap="jumpToChat" :data-uid="item.user_id" class="fs30 flex-grow-1 tc">在线聊</button>
					<button class="fs30 flex-grow-1 tc" @tap.stop.prevent="bindPhoneCall" :data-tel="item.mobile">打电话</button>
					<button @tap.stop.tap="jumpToFollow" :data-id="item.id" class="fs30 flex-grow-1 tc">写跟进</button>
					<button @tap.stop.prevent="changeAppoint" :data-user_id="item.user_id" :data-id="item.id" class="fs30 flex-grow-1 tc">移除</button>
				</view>
			</view>
			<u-loadmore v-if="nowList.data.length>9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
				nomore-text="没有更多了" />
			<template v-if="nowList.total== 0">
				<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
				</u-empty>
			</template>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				loadStatus: 'loadmore', //加载状态
				house_state: 1,//购房状态:1=待看房,2=已看房,3=已付订,4=已签约,5=已款清
				keyword: '',
				nowList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
			};
		},
		onLoad: function(options) {
			this.initData();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
		
			var that = this; //模拟加载
		
			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.nowList.current_page >= this.nowList.last_page) {
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getnowList();
			}
		},
		methods: {
				jumpDetail(id){
					uni.navigateTo({
						url:'/pages/member/my_clients_detail/my_clients_detail?id=' + id
					})
				},
				jumpToFollow(id){
					uni.navigateTo({
						url:'/pages/member/follow_up/follow_up?id=' + id
					})
				},
				jumpToChat(e) {
					var uid = e.currentTarget.dataset.uid || 0;
					var that = this;
					functions.checkLogin(function (ret) {
						if (ret) {
							functions.jumpToChat(uid);
						} else {
							functions.toast('请先登录');
						}
					});
				},
				// 拨打电话
				bindPhoneCall(e) {
					var tel = e.currentTarget.dataset.tel;
					functions.phoneCall({
						phoneNumber: tel //仅为示例，并非真实的电话号码
					});
					return false;
				},
		
				changeAppoint(event) {
					var id = Number(event.currentTarget.dataset.id);
					var user_id = Number(event.currentTarget.dataset.user_id);
					var that = this;
					var nowList = this.nowList;
					functions.checkLogin(function(ret) {
						if (ret) {
							//继续提交
							functions.submitAjaxData(
								that,
								'/api/xiluhouse/Appoint/change_appoint', {
									id: id,
									changeStatus: 2
								},
								function(res) {
									for (let index = nowList.data.length - 1; index >= 0; index--) {
										const element = nowList.data[index];
		
										if (user_id == element.user_id) {
											nowList.data.splice(index, 1);
										}
									}
		
									that.nowList = nowList
									functions.toast(res.msg);
								}
							);
						} else {
							functions.toast('请先登录');
						}
					});
					return false;
				},
		
				// 开始搜索
				doSearch(e) {
					this.keyword = e.detail.value
					this.initData();
				},
		
				choosenav(e) {
					this.house_state = e.currentTarget.dataset.navindex;
					this.initData();
				},
		
				// 获取列表信息
				getnowList: function() {
					var that = this;
					var json = {
						keyword: this.keyword,
						house_state: this.house_state
					};
					json.page = Number(that.nowList.current_page) + 1;
		
					if (json.page > 1 && that.nowList.current_page >= that.nowList.last_page) {
						functions.toast('已加载到底部了');
						this.loadStatus = 'nomore';
						return false;
					}
					this.loadStatus = 'loading';
					functions.getAjaxList(that, '/api/xiluhouse/appoint/my_user_list', json, function(res) {
						var nowList = res.data;
						if (json.page > 1) {
							var now_nowList_data = that.nowList.data || [];
							var now_nowList_data = now_nowList_data.concat(nowList.data);
							nowList.data = now_nowList_data;
						}
		
						that.nowList = nowList;
						console.log(that.nowList)
		
					});
				},
		
				// 获取所有可下拉刷新更新的数据
				initData: function() {
					var that = this;
					that.nowList.current_page = 0;
					that.getnowList();
				}
			}
		};
</script>

<style lang="less" scoped>
	.top_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		/* #ifdef H5 */
		top: 44px;
		padding-top: 5px;
		/* #endif */
	}

	.container {
		padding-top: 20rpx;
		min-height: auto;
	}

	.inputbox {
		width: 670rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 0.3);
		color: var(--black);
		padding: 0 30rpx;
		margin: 0 auto 10rpx;
		box-shadow: 0px 4rpx 30rpx 0px rgba(184, 189, 202, 0.3);
	}

	.icon_search {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.inputbox input {
		color: var(--black);
		font-size: var(--fs24);
	}

	.navbox {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #f4f3f3;
	}

	.navbox .navitem {
		width: 30%;
		font-size: 34rpx;
		position: relative;
	}

	.navbox .navitem.active {
		color: #0091ff;
	}

	.navbox .navitem.active::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #0091ff;
		border-radius: 50rpx;
		width: 30rpx;
		height: 6rpx;
	}

	.list_box {
		padding: 170rpx 30rpx 30rpx;
		/* #ifdef H5 */
		padding-top: 180rpx;
		/* #endif */
		position: relative;
		z-index: 2;
	}

	.list_item {

		box-shadow: 0px 4rpx 30rpx 0px rgba(184, 189, 202, 0.3);
		border-radius: 15rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.btn_box {
			border-top: 1rpx solid #F4F3F3;
			height: 80rpx;

			button {
				color: var(--normal);
				border-right: 1rpx solid #F4F3F3;

				&:last-child {
					border-right: none;
				}
			}
		}
	}
</style>
